const creator = '嘎'
// 封装一个渲染函数
function getBooks () {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'GET',
    params: {
      creator
    }
  }).then(res => {
    const html = res.data.data
      .map(item => {
        return `
      <tr>
          <td>${item.id}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td data-id=${item.id}>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
      `
      })
      .join('')
    document.querySelector('.list').innerHTML = html
  })
}
getBooks()

// 弹窗 显示和隐藏
const modalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(modalDom)

document.querySelector('.add-btn').addEventListener('click', function () {
  const form = document.querySelector('.add-form')
  // 收集表单数据交给服务器保存
  const dataList = serialize(form, { hash: true, empty: true })
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      ...dataList,
      creator
    }
  }).then(res => {
    // 重新渲染页面
    getBooks()
    // 关闭弹窗
    addModal.hide()
    // 重置表单
    form.reset()
  })
})

// 删除
// 通过事件委托的方式给删除按钮绑定事件
document.querySelector('.list').addEventListener('click', function (e) {
  // 判断是不是删除
  if (e.target.classList.contains('del')) {
    // 获取数据的id
    const id = e.target.parentNode.dataset.id

    // 发起删除请求
    axios({
      url: 'http://hmajax.itheima.net/api/books/' + id,
      method: 'DELETE'
    }).then(res => {
      // 重新渲染
      getBooks()
    })
  }
})

const modal = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(modal)

// 编辑
document.querySelector('.list').addEventListener('click', function (e) {
  // 判断是不是修改
  if (e.target.classList.contains('edit')) {
    // 获取数据的id
    const id = e.target.parentNode.dataset.id

    // 发起修改请求
    axios({
      url: 'http://hmajax.itheima.net/api/books/' + id,
      method: 'GET'
    }).then(res => {
      Object.keys(res.data.data).forEach(item => {
        // console.log(item);
        document.querySelector(`.edit-modal .${item}`).value =
          res.data.data[item]
      })
      // 显示弹窗
      editModal.show()
    })
  }
})

// 修改数据
document.querySelector('.edit-btn').addEventListener('click', function () {
  // 获取表单元素
  const form = document.querySelector('.edit-form')
  // 收集表单数据交给服务器保存
  const data = serialize(form, { hash: true, empty: true })
  axios({
    url: 'http://hmajax.itheima.net/api/books/' + data.id,
    method: 'PUT',
    data: {
      ...data,
      creator
    }
  }).then(res => {
    // 重新渲染页面
    getBooks()
    // 关闭弹窗
    editModal.hide()
  })
})
